﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>19_UseTexture</title>
    <link href="css/common.css" rel="stylesheet" />
</head>
<body>
    <canvas id="mycanvas"></canvas>
    <script id="shader-vs" type="x-shader/x-vertex">
        attribute vec4 aPosition;
        attribute vec2 aTexCoord;

        varying vec2 vTexCoord;

        void main() {
        gl_Position = aPosition;
        vTexCoord = aTexCoord;
        }
    </script>
    <script id="shader-fs" type="x-shader/x-fragment">
        precision mediump float;

        uniform sampler2D uSampler;
        varying vec2 vTexCoord;

        void main() {
        gl_FragColor = texture2D(uSampler, vTexCoord);
        }
    </script>
    <script>
        var canvas = document.getElementById('mycanvas');
        canvas.width = canvas.clientWidth;
        canvas.height = canvas.clientHeight;

        var gl = canvas.getContext('webgl');

        var vertexShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vertexShader, document.getElementById('shader-vs').innerHTML);
        gl.compileShader(vertexShader);

        var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fragmentShader, document.getElementById('shader-fs').innerHTML);
        gl.compileShader(fragmentShader);

        var shaderProgram = gl.createProgram();
        gl.attachShader(shaderProgram, vertexShader);
        gl.attachShader(shaderProgram, fragmentShader);
        gl.linkProgram(shaderProgram);
        gl.useProgram(shaderProgram);

        var aPosition = gl.getAttribLocation(shaderProgram, 'aPosition');
        var aTexCoord = gl.getAttribLocation(shaderProgram, 'aTexCoord');
        var uSampler = gl.getUniformLocation(shaderProgram, 'uSampler');

        var x = 300 / gl.drawingBufferWidth;
        var y = 300 / gl.drawingBufferHeight;

        var vertexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
            -x, y, 0.0, 0.0,
            -x, -y, 0.0, 1.0,
            x, y, 1.0, 0.0,
            x, -y, 1.0, 1.0
        ]), gl.STATIC_DRAW);

        var image = new Image();
        image.onload = function () {
            var texture = gl.createTexture();
            gl.activeTexture(gl.TEXTURE0);
            gl.bindTexture(gl.TEXTURE_2D, texture);
            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);
            gl.uniform1i(uSampler, 0);

            gl.clearColor(0.0, 0.0, 0.0, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);

            gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
            gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 4 * 4, 0);
            gl.enableVertexAttribArray(aPosition);

            gl.vertexAttribPointer(aTexCoord, 2, gl.FLOAT, false, 4 * 4, 2 * 4);
            gl.enableVertexAttribArray(aTexCoord);

            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
        };
        image.src = 'resources/sky.jpg';
    </script>
</body>
</html>
